<!--
 * @Author: y001554
 * @Date: 2023-01-16 20:11:08
 * @LastEditors: y001554
 * @LastEditTime: 2023-02-06 16:35:09
 * @FilePath: \ylwl\src\demos\citySelet.vue
 * @Description: 
 * 
 * Copyright (c) 2023 by FE/ylwl, All Rights Reserved. 
-->

<template>
  <div>
    <!-- <mButton label="测试" /> -->
    <div>城市选择器</div>
    <!-- <mTree :data="demo" label="调试过还是地方" /> -->
    <M-CitySelect
      ref="Citys"
      v-model="form.citys"
      :customer-props="{
        disabled: false
      }"
      :customer-cprops="{
        multiple: true

        // checkStrictly: true
        // placeholder: '选吧'
      }"
      :type="3"
      @change="change"
    />
    <div>{{ form.citys }}</div>
    <el-button type="primary" @click="test">初始值设置</el-button>
    <el-button @click="reset">ref调用测试</el-button>
  </div>
</template>
<script setup lang="ts">
// import { CitySelect } from '@@/plugins/components/citySelect'
import { CitySelect } from '@@/plugins/index'
import { ref, reactive } from 'vue'
// import utils from '@@/utils/index'
defineOptions({
  name: 'Demo1'
})
interface FormType {
  citys: string | number | Array<any>
}
const Citys = ref<any>(null)
// utils.Utils()
const form = reactive<FormType>({
  citys: ''
})
const reset = () => {
  console.log('Citys', Citys.value)
  Citys.value!.resetVale()
}
const change = (res: any) => {
  console.log('res', res)
}
const test = (): void => {
  form.citys = ['150000', '410000']
}
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
</script>
<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
